<template>
  <view
    class="product"
    @click="$emit('click')"
  >
    <v-image
      height="190rpx"
      width="190rpx"
      :src="product.sku_image"
      mode="aspectFill"
    />
    <view class="product-info">
      <view class="name">
        {{ product.spu_name }}
      </view>
      <view class="spec-info">
        {{ product.sku?.spec_info?.map((item) => item.value).join('; ') }}
      </view>
      <view class="footer">
        <v-price
          size="32rpx"
          :price="product.sell_price"
          color="#333333"
        />
        <view class="quantity">
          {{ product.quantity ? `x${product.quantity}` : '' }}
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
defineProps<{
  product: BackRefundDetailVO;
}>();

defineEmits<{
  click: [];
}>();
</script>

<style lang="scss" scoped>
.product {
  display: flex;
  align-items: stretch;
  .product-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    margin-left: 24rpx;
    .name {
      font-weight: bold;
      margin-bottom: 12rpx;
    }
    .spec-info {
      flex: 1;
      min-height: 0;
      margin-bottom: 20rpx;
      font-size: 24rpx;
      color: #666666;
    }
    .footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .quantity {
        color: #999999;
      }
    }
  }
}
</style>
